<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/detail.css">
</head>
<body>
    <header class="header">
        <div class="nav">
            <div class="nav-left">
                <ul>
                    <a href="#">小米商城</a>
                    <a href="#">MIUI</a>
                    <a href="#">loT</a>
                    <a href="#">云服务</a>
                    <a href="#">金融</a>
                    <a href="#">有品</a>
                    <a href="#">小爱开放平台</a>
                    <a href="#">企业团购</a>
                    <a href="#">直播</a>
                    <a href="#">资质执照</a>
                    <a href="#">协议规则</a>
                    <a href="#">下载app</a>
                    <a href="#">Select Location</a>
                </ul>
                <div class="nav-right">
                    <ul>
                        <a href="./login.html">登录</a>
                        <a href="./register.html">注册</a>
                        <a href="#">信息通知</a>
                        <span class="wrp">
                            <img src="images/xm (1).jpg" alt=""> 购物车（0）</span>
                    </ul>
                </div>
            </div>
        </div>
    </header>
        <main class="main">
        <div class="main-nav">
            <div class="main-wrp">
                <!-- logo -->
                <div class="container">
                    <h1>
                        <img src="images/logo.jpg" alt="">
                    </h1>

                    <!-- 菜单 -->
                    <ul>
                        <a href="#">小米手机</a>
                        <a href="#">Redmi红米</a>
                        <a href="#">电视</a>
                        <a href="#">笔记本</a>
                        <a href="#">家电</a>
                        <a href="#">路由器</a>
                        <a href="#">智能硬件</a>
                        <a href="#">服务</a>
                        <a href="#">社区</a>
                    </ul>
                    <span>
                        <input type="text" placeholder="小米9Pro 5G">
                    </span>
                </div>
    <div class="box">
        <div class="m">
            <div class="middle">
                <img src="./images/images/小米.jpg" alt="">
                <div class="shade"></div>
            </div>
            <div class="big"></div>
        </div>
        <div class="small">
            <ul>
                <li class="active">
                    <a href="#">
                        <img src="./images/images/small1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/images/small2.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="content"></div>
    </div>
    <!-- 信息 -->
   
    </body>
<script type="text/javascript">
// 遮罩在中等图片上移动过的距离/中等图片 === 大图移动的距离/大图
// 遮罩在中等图上向右移动了   中图1/4 
// 大图就应该想左移动   大图的1/4

// 先做鼠标放到中等盒子上，遮罩和大盒子显示
function Enlarge(classname){
    // 将需要操作的元素都获取成对象属性
    this.box = document.querySelector("."+classname);
    this.m = this.box.querySelector(".m");
    this.middleImg = this.box.querySelector(".m img");
    this.middle = this.box.querySelector(".middle");
    this.shade = this.box.querySelector(".shade");
    this.ulis = this.box.querySelectorAll("ul li");
    this.big = this.box.querySelector(".big");
    var _this = this;
    // 绑定事件
    this.middle.onmouseenter = ()=>{
        this.over();
    }
    this.middle.onmouseleave= ()=>{
        // console.log(456);
        this.out();
    }
    // 点击小图的事件
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].onclick = function(){
            _this.click(this);
        }
    }
}
// 定义点击小图方法
Enlarge.prototype.click = function(ele){
    // console.log(ele);
    // 将所有li的红框去掉
    for(var i=0;i<this.ulis.length;i++){
        this.ulis[i].style.borderColor = "#0f0"
    }
    // 给自己加红框
    ele.style.borderColor = "#f00";
    // 需要切换对应的中等图片
    // 先获取当前点击的li中的图片的路径
    // 先找到小图片这个标签
    var smallImg = ele.firstElementChild.firstElementChild;
    // 通过这个标签的src找路径 - src属性获取
    var smallPath = smallImg.getAttribute("src");
    // './images/small2.jpg'
    // str.slice(开始下标);
    // 点最后一次出现的位置
    var lastIndex = smallPath.lastIndexOf(".");
    // 根据点的位置截取数字以及后面的扩展名
    var suffix = smallPath.slice(lastIndex-1);
    // 拼接中等图片的路径
    var middlePath = "./images/middle" + suffix;
    // 给中等图片的img标签设置src属性
    this.middleImg.setAttribute("src",middlePath);
    // 设置大图的路径
    var bigPath = "./images/big"+suffix;
    // 设置给大盒子的背景
    this.big.style.backgroundImage = "url("+bigPath+")"
    // console.log(suffix);
}
// 定义鼠标离开中的图片上的方法
Enlarge.prototype.out = function(){
    this.shade.style.display = "none"
    this.big.style.display = "none"
}
// 定义鼠标放到中等图片上的方法
Enlarge.prototype.over = function(){
    // console.log(123);
    this.shade.style.display = "block"
    this.big.style.display = "block"
    var _this = this;
    // 需要一个鼠标移动事件
    this.middle.onmousemove=function(e){
        // console.log(123);
        // 拖拽- 需要获取光标位置
        var e = e || window.event;
        var x = e.pageX;
        var y = e.pageY;
        // console.log(x,y);
        var l = x - _this.box.offsetLeft - this.offsetLeft - _this.shade.offsetWidth/2;
        if(l<=0){
            l=0;
        }
        if(l>=this.clientWidth - _this.shade.offsetWidth){
            l=this.clientWidth - _this.shade.offsetWidth
        }
        _this.shade.style.left = l + "px";
        var t = y - _this.box.offsetTop - this.offsetTop - _this.shade.offsetHeight/2;
        if(t<=0){
            t = 0;
        }
        if(t>=this.clientHeight - _this.shade.offsetHeight){
            t=this.clientHeight - _this.shade.offsetHeight
        }
        _this.shade.style.top = t + "px";
        // 大图也跟着移动
        _this.fangda(l,t);
    }
}
Enlarge.prototype.fangda = function(l,t){
    // 需要计算移动过的比例
    // 遮罩距离左边的距离 - l
    // 大图的宽度
    var w = this.middle.clientWidth;
    // 比例就是 l/w;
    var percentw = l/w;
    // 根据这个比例计算大图的left值
    // 这个比例就应该等于 大图的left/大图的宽度（大图宽度设置过背景大小）
    // 获取背景大小
    var style = window.getComputedStyle(this.big).backgroundSize;
    // 获取到的是宽px 高px组成的一个字符串 ，需要使用空格分隔获取到具体的宽和高
    var bigW = parseInt(style.split(" ")[0]);
    // 大图的left就是比例 * 大图的宽
    var bigL = percentw * bigW;

    // 高度
    var h = this.middle.clientHeight;
    var percenth = t/h;
    var bigH = parseInt(style.split(" ")[1]);
    var bigT = percenth * bigH;
    // 需要设置给背景的定位
    this.big.style.backgroundPosition = `-${bigL}px -${bigT}px`;
    // console.log(bigW);
}
var enlarge = new Enlarge("box");
// 1.遮罩的位置一定要在光标位置基础上 - 外面盒子左边的间距
// 2.如果有滚动条，光标位置就使用pageX pageY
// 3.放大镜，咱们讲的使用的是3套图，小、中、大，但是放大镜可以使用一套图来做 - 如果使用小图放大会模糊，大图缩小不模糊 - 一定要找大图去做
</script>
</html>